<template>
  <div style="width: 100%; height: 100%; min-width: 700px;">
    <div
      :class="{ mask_result: isChange }"
      @click="isChange=false;currentMonth=lastMonth;currentYear=lastYear"
    />
    <div class="result_header">
      <span class="result_header_title">
        <span style="border-left: 5px solid #21a6e6;">&nbsp;&nbsp;</span>
        <i class="el-icon-s-home"/>
        检测结果查询
      </span>
      
      <el-link
        type="primary"
        class="result_header_change"
        :underline="false"
      >
        <div v-if="selectWay">
          <!-- 按月份筛查 -->
          <span v-if="!isChange" @click="isChange=true;lastMonth=currentMonth">更改</span>
          <span v-else @click="handleMonthChange">确定</span>
        </div>
        <div v-else>
          <!-- 按年份筛查 -->
          <span v-if="!isChange" @click="isChange=true;lastYear=currentYear">更改</span>
          <span v-else @click="handleYearChange">确定</span>
        </div>
      </el-link>
      <div v-if="selectWay">
        <!-- 使用月份筛查 -->
        <div v-if="!isChange">
          <div class="result_header_info">
            <span style="font-weight: bold;">当前月份：&nbsp;</span>
            <span>{{ currentMonth }}</span>
          </div>
        </div>
        <div v-else>
          <el-date-picker
            class="result_header_select"
            v-model="currentMonth"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            placeholder="选择月"
            :clearable="false"
          />
        </div>
      </div>
      <div v-else>
        <!-- 使用年份筛查 -->
        <div v-if="!isChange">
          <div class="result_header_info">
            <span style="font-weight: bold;">当前年份：&nbsp;</span>
            <span>{{ currentYear }}</span>
          </div>
        </div>
        <div v-else>
          <el-date-picker
            class="result_header_select"
            v-model="currentYear"
            type="year"
            format="yyyy"
            value-format="yyyy"
            placeholder="选择年"
            :clearable="false"
          />
        </div>
      </div>
      <el-link
        type="primary"
        class="result_header_way"
        :underline="false"
      >
        <span v-if="selectWay" @click="changeWay">按年份筛查</span>
        <span v-else @click="changeWay">按月份筛查</span>
      </el-link>
    </div>
    <div class="result_main">
      <div v-if="showResults.length === 0">
        <el-empty
          v-if="selectWay"
          description="这个月没有做过核酸哦~"
        />
        <el-empty
          v-else
          description="这一年没有做过核酸哦~"
        />
      </div>
      <el-timeline v-else>
        <el-timeline-item
          v-for="(value, key, index) in resultInfo"
          :key="index"
          :timestamp="key"
          placement="top"
        >
          <el-card
            class="result_card"
            v-for="item in value"
            :key="item.time"
          >
            <span class="result_card_header">核酸检测结果</span>
            <div class="result_card_res">
              <div v-if="item.result === '阴性'">{{ item.result }}</div>
              <div v-else style="background-color: #F56C6C; border-radius: 50%;">{{ item.result }}</div>
            </div>
            <el-divider/>
            <div style="margin-bottom: 10px;">
              <span class="result_card_label">检测机构</span>
              <span class="result_card_content">{{ item.name }}</span>
            </div>
            <div style="margin-bottom: 10px;">
              <span class="result_card_label">机构地址</span>
              <span class="result_card_content">{{ item.address }}</span>
            </div>
            <div style="margin-bottom: 10px;">
              <span class="result_card_label">检测时间</span>
              <span class="result_card_content">{{ item.time }}</span>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import {
  userHospitalResults
} from '@/api/result-service'
export default {
  data() {
    return {
      selectWay: true,
      isChange: false,
      defaultResults: [],
      showResults: [],
      resultInfo: {},
      currentMonth: "无",
      lastMonth: "",
      currentYear: "无",
      lastYear: ""
    }
  },
  created() {
    userHospitalResults().then((data) => {
      if (data.length === 0) return;
      this.defaultResults = data.sort((a, b) => {
        if (a.time < b.time) return 1;
        else return -1;
      });
      this.currentMonth = this.defaultResults[0].time.substring(0, 7);
      this.showResults = this.defaultResults.filter((item) => {
        return item.time.includes(this.currentMonth);
      });
      this.initShowResults(10);
    });
  },
  methods: {
    initShowResults(val) {
      this.resultInfo = {};
      const tmp = {};
      this.showResults.forEach((item) => {
        let str = item.time.substring(0, val);
        if (!tmp[str]) {
          tmp[str] = [];
        }
        tmp[str].push(item);
      });
      for (const item in tmp) {
        this.$set(this.resultInfo, item, tmp[item]);
      };
    },
    changeWay() {
      if (this.defaultResults.length === 0) {
        this.selectWay = !this.selectWay;
        return;
      }
      if (this.selectWay) { // 改成按年份筛查
        this.currentYear = this.defaultResults[0].time.substring(0, 4);
        this.showResults = this.defaultResults.filter((item) => {
          return item.time.includes(this.currentYear);
        });
        this.initShowResults(7);
        this.selectWay = false;
      } else { // 改成按月份筛查
        this.currentMonth = this.defaultResults[0].time.substring(0, 7);
        this.showResults = this.defaultResults.filter((item) => {
          return item.time.includes(this.currentMonth);
        });
        this.initShowResults(10);
        this.selectWay = true;
      }
    },
    handleMonthChange() {
      this.showResults = this.defaultResults.filter((item) => {
        return item.time.includes(this.currentMonth);
      });
      this.initShowResults(10);
      this.isChange = false;
    },
    handleYearChange() {
      this.showResults = this.defaultResults.filter((item) => {
        return item.time.includes(this.currentYear);
      });
      this.initShowResults(7);
      this.isChange = false;
    }
  }
}
</script>

<style lang="scss">
.mask_result {
  position: fixed;
  z-index: 49;
  width: 100%;
  height: calc(100% - 51px);
  top: 111px;
  background-color: rgba(0, 0, 0, 0.3);
}

.result_header {
  background: #FFFFFF;
  border-bottom: 1px solid #DCDFE6;
  width: calc(100% - 60px);
  height: 50px;
  margin: 0px 30px;
  position: relative;
  z-index: 50;
  
  .result_header_title {
    float: left;
    font-weight: bold;
    font-size: 22px;
    line-height: 50px;
    margin-left: 5px;
  }

  .result_header_way {
    float: right;
    margin-right: 20px;
    line-height: 50px;
    font-size: 16px;
  }

  .result_header_change {
    float: right;
    margin-right: 20px;
    line-height: 50px;
    font-size: 16px;
  }

  .result_header_select {
    width: 300px;
    float: right;
    margin-right: 40px;
    line-height: 50px;
    font-size: 16px;
  }

  .result_header_info {
    float: right;
    line-height: 50px;
    margin-right: 40px;
  }
}

.result_main {
  margin: 50px auto 0px auto;
  width: calc(max(80%, 600px));

  .result_card {
    width: 80%;
    margin: 40px;

    .result_card_header {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .result_card_res {
      float: right;
      text-align: center;
      background-color: #67C23A;
      color: #FFFFFF;
      line-height: 40px;
      height: 40px;
      width: 40px;
      border-radius: 50%;
      transform: translate(25%, -25%);
      cursor: default;
    }

    .result_card_label {
      font-weight: bold;
    }
    
    .result_card_content {
      float: right;
      color: #909399;
    }

    .result_card_label {
      font-weight: bold;
    }
    
    .result_card_content {
      float: right;
      color: #909399;
    }
  }
}

</style>
